<!doctype html>
<html>

<head>
    <title>Socket API Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <style>
      #messages .alert-success {
        white-space: pre-wrap;
      }
    </style>
</head>

<body>
    <h1>Socket API Test
      <p id="clientId"></p>
    </h1>
    <div class="container" style="margin-top: 20px;">
        <form action="" role="form">
            <textarea id="m" class="form-control"></textarea>
            <button class="btn btn-primary" style="margin-top:10px;">Send</button>
        </form>
        <div id="messages" class="jumbotron" style="margin-top:10px;">
            <!--<p class="alert alert-success">Test</p>-->
        </div>
    </div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
    // var socket = io.connect('http://app.ikamobile.cn:3000');
    /*var socket = io.connect('http://localhost:3000', { query: "matchId=abcdefg&playerName=dan" });*/
    fetch('http://localhost:3000/wechat/clientId')
      .then(function(res) {
        return res.json()
      })
      .then(function(clientId) {
        $('#clientId').html('clientId '+ clientId);
        var socket = io.connect('http://localhost:3000', { query: "matchId=abcdefg&playerName=dan&tableId=1234&clientId=" + clientId })

        $('form').submit(function () {
            socket.emit('sendMsg', $('#m').val());
            $('#m').val('');
            return false;
        });

        var events = ['me', 'data', 'game', 'matchWaiting', 'matchReconnect', 'matchLeave', 'match', 'newGame']

        events.forEach(function(eventName) {
          socket.on(eventName, function(data) {
            console.log('%c event ' + eventName, 'background: #222; color: #bada55')
            console.log(data)
            $('#messages').html(
              $('#messages').html() +
              new Date() + '    ' + eventName +
              '<p class="alert alert-success">' +
              JSON.stringify(data, null, '\t') +
              '</p>'
            );
          })
        })
      })
</script>

</html>
